<%--
	注意：此页面为页面流程的待办页面
	1.业务页面均需要实现方法JavaScript方法modal_pass(taskDefinitionKey, assignee, processInstanceId, taskId, comment, handleType, withdraw)调用java代码推进流程
	2.业务页面均需要实现方法JavaScript方法modal_stop(processInstanceId, taskId)调用java代码终止流程
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>待办任务详细页</title>
	<script src="${pageContext.request.contextPath}/resource/js/frm/workflow/common/date-format.js"></script>
	<script src="${pageContext.request.contextPath}/resource/js/frm/workflow/taskdetail/task-todo.js"></script>
</head>
<body>
	<ol class="breadcrumb">
		<li>
			<a href="taskToDoList"><span style="font-size: 14px;background-color:transparent" id="returnList">返回待办任务列表</span></a>
		</li>
	</ol>
	
	<div style="display:none;">
		<!-- 应用根路径，供脚本文件使用 -->
		<input type="hidden" id="root" name="root" value="${appName}${appPath}" />
		<!-- 当前任务参数串 -->
		<input type="hidden" id="param" name="param"/>
		<!-- 是否为会签节点 -->
		<input type="hidden" id="isCounterSign" name="isCounterSign" value="${isCounterSign}"/>
		<!-- 任务相关属性 -->
		<input type="text" id="taskId" name="taskId" value="${taskDetail.taskId}"/>
		<input type="text" id="taskDefinitionKey" name="taskDefinitionKey" value="${taskDetail.taskDefinitionKey}"/>
		<input type="text" id="name" name="name" value="${taskDetail.name}"/>
		<input type="text" id="processInstanceId" name="processInstanceId" value="${taskDetail.processInstanceId}"/>
		<input type="text" id="processDefinitionId" name="processDefinitionId" value="${taskDetail.processDefinitionId}"/>
		<input type="text" id="title" name="title" value="${taskDetail.title}"/>
		<input type="text" id="processDefinitionKey" name="processDefinitionKey" value="${taskDetail.processDefinitionKey}"/>
		<input type="text" id="executionId" name="executionId" value="${taskDetail.executionId}"/>
		<!-- 任务所属登录人岗位ID -->
		<input type="text" id="assigneeId" name="assigneeId" value="${taskDetail.assigneeId}"/>
		<!-- 是否为首环节或尾环节 -->
		<input type="hidden" id="startLink" name="startLink" />
   		<input type="hidden" id="endLink" name="endLink" />
   		<!-- 是否为简退的退回首环节以进行直接推进操作-->
   		<input type="hidden" id="canQuickPush" name="canQuickPush" value="${canQuickPush}"/>
   		<!-- 处理类型及条件分支 -->
   		<input type="hidden" id="handleType" name="handleType" />
   		<input type="hidden" id="passSelect" name="passSelect" />
   		<!-- 是否可以进行回退、转派、中止、简退操作-->
   		<input type="hidden" id="buttonBack" name="buttonBack" value="${buttonBack}"/>
   		<input type="hidden" id="buttonTurn" name="buttonTurn" value="${buttonTurn}"/>
   		<input type="hidden" id="buttonBreak" name="buttonBreak" value="${buttonBreak}"/>
   		<input type="hidden" id="buttonQuick" name="buttonQuick" value="${buttonQuick}"/>
	</div>
		      
	    <div>
			<ul id="myTab" class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#business" aria-controls="business" role="tab" data-toggle="tab" id="businessTab">业务信息</a></li>
				<li role="presentation" id="historyLi"><a href="#history" aria-controls="history" role="tab" data-toggle="tab">流程历史</a></li>
				<li role="presentation"><a href="#diagram" aria-controls="diagram" role="tab" data-toggle="tab">流程图</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div role="tabpanel" class="tab-pane fade in active" id="business"></div>
				<div role="tabpanel" class="tab-pane fade" id="history">
				   	<table class="table table-striped table-bordered table-condensed">
				   		<thead>
				   			<tr>
					   			<th>序号</th>
					   			<th>环节名称</th>
					   			<th>受理人</th>
					   			<th>受理人部门</th>
					   			<th>处理方式</th>
					   			<th>任务接收时间</th>
					   			<th>任务办理时间</th>
					   			<th>处理意见</th>
				   			</tr>
				   		</thead>
				   		<tbody id="historyContent">
				   		</tbody>
				   	</table>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="diagram">
				   <img id="diagramImg" src=""></img>
				</div>
			</div>
		</div>
		      
		<div id="out-footer" style="text-align:right">
			<button id="passButton" type="button" class="btn btn-success">通过</button>
			<button id="backButton" type="button" class="btn btn-warning">退回</button>
			<button id="quickButton" type="button" class="btn btn-warning">简退</button>
			<button id="stopButton" type="button" class="btn btn-danger">中止</button>
			<button id="turnButton" type="button" class="btn btn-info">转派</button>
		</div>
		
		<div id="in-footer" style="display:none; text-align:right">
			<div id="linkDiv">
				<div class="col-sm-2">
		      		<label for="link" style="text-align:center;">下一环节名称</label>
		      	</div>
		      	<div class="col-sm-10" style="padding-bottom:20px;">
		      		<select class="form-control" id="link" name="link" onchange="clearAssignee();"></select>
		      	</div>
			</div>
			<div id="assigneeDiv">
				<div class="col-sm-2">
		      		<label for="assignee" style="text-align:center;">下环节处理人</label>
		      	</div>
		      	<div class="col-sm-10" style="padding-bottom:20px;">
		      		<input type="text" name="assigneeName" class="form-control" id="assigneeName" readonly="readonly" style="padding-left:10px"/>
		      		<input type="hidden" name="assignee" class="form-control" id="assignee"/>
		      		<span id="selectAssignee" style="font-size:16px; position:absolute;top:9px;right:25px;z-index:999;cursor:pointer;" class="glyphicon glyphicon-zoom-in"></span>
		      	</div>
			</div>
      		
	      	<div class="col-sm-2">
	      		<label for="comment" style="text-align:center; padding-top:25px;">审批处理意见</label>
	      	</div>
	      	<div class="col-sm-10" style="padding-bottom:20px;">
	      		<textarea name="comment" id="comment" class="form-control" rows="3" required autofocus></textarea>
	      	</div>       		
	      	<button id="confirmButton" type="button" class="btn btn-success">确认</button>
	        <button type="button" class="btn btn-default" onclick="selectButton();">返回</button>
	    </div>
</body>
</html>